<!--
 * @Author: your name
 * @Date: 2021-07-12 15:48:16
 * @LastEditTime: 2021-11-12 16:07:24
 * @LastEditors: Please set LastEditors
 * @Description: Common feed form
 * @FilePath: \jinfeng_up\src\components\Feedback\Feedback.vue
-->
<template>
  <div class="createFeedBack">
      <div class="header">
        <div class="header_left">
          <span class="left_btn"
                @click="toFeedBack"></span>
          <span class="left_txt">反馈总览 - 编辑反馈</span>
        </div>
        <div class="header_right header_btn">
          <el-button class="option_btn"
                     @click="sendCancel">取消</el-button>
          <el-button class="option_btn"
                     @click="getMsgFormSon">存草稿</el-button>
          <el-button class="option_btn"
                     @click="getMsgFormSonS('draftForm')">发布</el-button>
        </div>
      </div>
      <div class="create_container">
        <el-form class="createFeedBackForm"
                 :model="draftForm"
                 ref="draftForm"
                 label-position="left"
                 label-width="140px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="产品名称"
                            class="ProductionName"
                            prop="productId"
                            :rules="{
                  required: true,
                  message: '请选择产品名称',
                  trigger: 'select'
                }">
                <el-select class="userSelect"
                           v-model="draftForm.productId"
                           placeholder="请选择产品名称"
                           clearable
                           filterable
                           @change="productionChange">
                  <el-option v-for="(item, index) in ProductList"
                             :key="index"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="营销项目名称"
                            class="Marketing"
                            prop="marketProjectSecond"
                            :rules="{
                  required: true,
                  message: '请选择营销项目名称',
                  trigger: 'select'
                }">
                <el-select class="userSelect"
                           v-model="draftForm.marketProjectSecond"
                           clearable
                           filterable
                           placeholder="请选择营销项目名称">
                  <el-option v-for="(item, index) in MarketingProjectName"
                             :key="index"
                             :label="item.title"
                             :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="版本号"
                            prop="versionNumber"
                             id="lengthLimit"
                            :rules="{
                  required: true,
                  message: '请输入版本号',
                  trigger: 'blur',
                  min: 1, max: 20, message: '请输入版本号,长度在 0 到 20 个字符', trigger: 'blur'
                }">
                <el-input class="userInput"
                          v-model="draftForm.versionNumber"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="营销项目状态"
                            prop="marketProjectFirst"
                            :rules="{
                  required: true,
                  message: '请选择营销项目状态',
                  trigger: 'select'
                }">
                <el-select class="userSelect"
                           v-model="draftForm.marketProjectFirst"
                           clearable
                           filterable
                           placeholder="请选择营销项目状态">
                  <el-option v-for="(item, index) in problemTypeList"
                             :key="index"
                             :label="item.title"
                             :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="反馈来源"
                            class="DesignatedPerson"
                            prop="feedBackSource"
                            :rules="{
                  required: true,
                  message: '请选择反馈来源',
                  trigger: 'select'
                }">
                <el-select class="userSelect"
                           v-model="draftForm.feedBackSource"
                           clearable
                           filterable
                           placeholder="请选择反馈来源">
                  <el-option v-for="(item, index) in feedBackSourceList"
                             :key="index"
                             :label="item.title"
                             :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="指派人"
                            class="DesignatedPerson"
                            prop="userId"
                            :rules="{
                  required: true,
                  message: '请选择指派人',
                  trigger: 'select'
                }">
                <el-select class="userSelect"
                           v-model="draftForm.userId"
                           v-if="draftForm.feedBackNumber === null"
                           clearable
                           filterable
                           placeholder="请选择指派人">
                  <el-option v-for="(item, index) in UserList"
                             :key="index"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
                <el-select class="userSelect"
                           v-model="draftForm.createUserOfUser"
                           v-if="draftForm.feedBackNumber != null"
                           clearable
                           filterable
                           placeholder="请选择指派人">
                  <el-option v-for="(item, index) in UserList"
                             :key="index"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="所处阶段"
                            class="ProductionName"
                            prop="stage"
                            :rules="{
                  required: true,
                  message: '请选择处理阶段',
                  trigger: 'select'
                }">
                <el-select class="userSelect"
                           v-model="draftForm.stage"
                           placeholder="请选择处理阶段"
                           clearable
                           filterable
                           disabled>
                  <el-option v-for="(item, index) in childStageList"
                             :key="index"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建人">
                <el-select v-model="draftForm.creator"
                         clearable
                         filterable
                         class="userSelect"
                             disabled>
                    <el-option v-for="item in creatUserList"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id"> </el-option>
                  </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建人部门">
                <el-input disabled
                          class="userInput"
                          v-model="draftForm.department"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 以下都是可动态增加的表单项 -->
          <div class="feedBackitem">
            <!-- 栏目提示 -->
            <div class="columnTips">
              <span class="blue_square"></span>
              <span class="column_title">反馈详情描述</span>
            </div>

            <el-row>
                <el-form-item class="Marketing"
                              label="标题"
                              prop="title"
                              :rules="{
                    required: true,
                    message: '标题不能为空',
                    trigger: 'blur'
                  }">
                  <el-input v-model="draftForm.title"
                            class="userInputTitle"></el-input>
                </el-form-item>
            </el-row>
            <el-row>
                <el-col :span="12">
                <el-form-item label="问题大类"
                              class="DesignatedPerson">
                  <el-select class="userSelect"
                  @change="changeBigCatlog($event)"
                             v-model="draftForm.problemTypeParent"
                             placeholder="请选择问题大类"
                             clearable
                             filterable
                           >
                    <el-option v-for="(item, index) in marketProjectFirstList"
                               :key="index"
                               :label="item.name"
                               :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="问题小类"
                              class="DesignatedPerson">
                  <el-select class="userSelect"
                             v-model="draftForm.problemType"
                             clearable
                             filterable
                             placeholder="请选择问题小类">
                    <el-option v-for="(item, index) in marketProjectSecondList"
                               :key="index"
                               :label="item.name"
                               :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="问题描述"
                              class="questionDesc"
                              prop="problemDescribe"
                              :rules="{
                    required: true,
                    message: '请输入问题描述',
                    trigger: 'blur'
                  }">
               <div class="isShowError">
                    <el-upload
      class="avatar-uploader quill-img"
      :action="fileUpload"
      :on-change="imgSaveToUrl"
      :headers="importHeaders"
      :show-file-list="false"
      :on-success="quillImgSuccess"
      :on-error="uploadError"
      :before-upload="quillImgBefore"
      accept=".jpg,.jpeg,.png,.gif"
    ></el-upload>
    <quill-editor
      class="editor"
      v-model="draftForm.problemDescribe"
      :options="editorOption"
      ref="quillEditor"
    >
    </quill-editor>
               </div>
                  <!-- <tinymceeditor v-model="draftForm.problemDescribe"
                                 ref="tinymceeditor" /> -->
                  <!-- <quill-editor v-model="draftForm.problemDescribe"
                                ref="notesQuillEditor"> </quill-editor> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="初步排查结果"
                              class="questionDesc"
                              prop="excludeResult"
                              :rules="{
                    required: true,
                    message: '请输入初步排查结果',
                    trigger: 'blur'
                  }">
                   <div class="isShowError">
                  <el-upload
      class="avatar-uploader quill-img1"
      :action="fileUpload"
      :on-change="imgSaveToUrl2"
      :headers="importHeaders"
      :show-file-list="false"
      :on-success="quillImgSuccess2"
      :on-error="uploadError2"
      :before-upload="quillImgBefore2"
      accept=".jpg,.jpeg,.png,.gif"
    ></el-upload>
    <quill-editor
      class="editor"
      v-model="draftForm.excludeResult"
      :options="editorOption2"
      ref="quillEditor2"
    >
    </quill-editor>
                  <!-- <tinymceeditor v-model="draftForm.excludeResult"
                                 ref="tinymceeditor" /> -->
                                 <!-- <socialUpload
                  :contentDefault="draftForm.excludeResult"
                  @getContent="getExcludeResultContent"
                ></socialUpload> -->
                  <!-- <vue-tinymce v-model="draftForm.excludeResult"
                               :setting="setting" /> -->
                  <!-- <quill-editor v-model="draftForm.excludeResult"
                                ref="notesQuillEditor"> </quill-editor> -->
                 </div>
                 </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="是否服务请求"
                              :rules="{
                    required: true,
                    message: '请选择是否服务请求',
                    trigger: 'select'
                  }">
                  <el-select class="userSelect"
                             v-model="draftForm.serverRequestTag"
                             clearable
                             filterable
                             placeholder="请选择是否服务请求">
                    <el-option label="是"
                               :value="true"></el-option>
                    <el-option label="否"
                               :value="false"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item v-show="draftForm.serverRequestTag"
                              label="服务请求编号"
                              class="Marketing"
                              :rules="{
                    required: true,
                    message: '请选择请求编号',
                    trigger: 'select'
                  }">
                  <el-input class="userInput"
                            v-model="draftForm.serverRequestNumber"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                  <!--  :picker-options="pickerOptions" -->
                <el-form-item label="服务请求创建时间"

                              v-show="draftForm.serverRequestTag"
                              :rules="[{ required: true, message: '请选择服务请求时间', trigger: 'blur' }]">
                  <el-date-picker class="userSelect"
                                  v-model="draftForm.serverRequestTime"

                                  type="date"
                                  placeholder="请选择创建时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="影响类别 "
                              class="VersionNum"
                              prop="influenceCategory"
                              :rules="{
                  required: true,
                  message: '请选择影响类别',
                  trigger: 'select'
                }">
                  <el-select class="userSelect"
                             v-model="draftForm.influenceCategory"
                             clearable
                             filterable
                             placeholder="请选择影响类别">
                    <el-option v-for="(item, index) in influenceCategory"
                               :key="index"
                               :label="item.title"
                               :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="截止日期"
                              class="DesignatedPerson serviceRequestNum">
                  <el-date-picker class="userSelect"
                                  v-model="draftForm.expirationDate"
                                  :picker-options="pickerOptions"
                                  type="date"
                                  placeholder="请选择截止日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="影响描述"
                              class="questionDesc"
                              >
                  <!-- <socialUpload
                  :contentDefault="draftForm.influenceDescribe"
                  @getContent="getInfluenceDescribeContent"
                ></socialUpload> -->
                <el-upload
      class="avatar-uploader quill-img2"
      :action="fileUpload"
      :on-change="imgSaveToUrl3"
      :headers="importHeaders"
      :show-file-list="false"
      :on-success="quillImgSuccess3"
      :on-error="uploadError3"
      :before-upload="quillImgBefore3"
      accept=".jpg,.jpeg,.png,.gif"
    ></el-upload>
    <quill-editor
      class="editor"
      v-model="draftForm.influenceDescribe"
      :options="editorOption3"
      ref="quillEditor3"
    >
    </quill-editor>
                  <!-- <tinymceeditor v-model="draftForm.influenceDescribe"
                                 ref="tinymceeditor" /> -->
                  <!-- <vue-tinymce v-model="draftForm.influenceDescribe"
                               :setting="setting" /> -->
                  <!-- <quill-editor v-model="draftForm.influenceDescribe"
                                ref="notesQuillEditor"> </quill-editor> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="添加附件"
                              class="uploadFiles">
                  <br />
                  <el-upload class="upload-demo"
                             :action="fileUpload"
                             :on-success="onFileSuccess"
                             :on-error="onFileError"
                             :on-remove="onFileRemove"
                             :on-preview="handlePreview"
                             :data="{
                      checkOfficeFmt: false,
                      isTmp: false,
                      fileType: 'feedback'
                    }"
                             multiple
                             :limit="3"
                             :file-list="encLosureList">
                    <el-button size="small"
                               type="primary"
                               style="margin-top: 6px">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
    <el-dialog title="提示"
               :visible.sync="$store.state.showItem"
               :close-on-click-modal = "false"
               width="25%">
      <span>确定离开当前页面吗？</span>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogComfire">确 定</el-button>
        <el-button type="primary"
                   @click="dialogGetMsgFormSon">存草稿</el-button>
        <el-button type="primary"
                   @click="dialogGetMsgFormSons">发 布</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Api from '@/api/feedBack/api'

// 工具栏配置
const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
    ['blockquote', 'code-block'], // 引用  代码块
    [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
    [{ indent: '-1' }, { indent: '+1' }], // 缩进
    [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
    [{ align: [] }], // 对齐方式
    ['clean'], // 清除文本格式
    ['image'] // 图片、视频
]
import store from '@/store/index'
import { FeedBack } from '@/api/feedBack/server'
import { FormOptionSet } from '@/api/setting/service.js'
// import socialUpload from '@/components/socialUpload/socialUpload.vue'
// import tinymceeditor from '@/components/tinymceEditer/tinymceEditer.vue'
export default {
    name: '',
    components: {
        // socialUpload
    },
    props: {},
    data() {
        var mytoken = localStorage.getItem('token') // 要保证取到
        return {
            pickerOptions: {
                disabledDate(time) {
                    const _now = Date.now()
                    const seven = 1 * 24 * 60 * 60 * 1000
                    const sevenDays = _now - seven
                    return time.getTime() < sevenDays
                }
            },
            editorOption: {
                modules: {
                    toolbar: {
                        container: toolbarOptions,
                        handlers: {
                            image: function(value) {
                                if (value) {
                                    // 触发input框选择图片文件
                                    document.querySelector('.quill-img input').click()
                                } else {
                                    this.quill.format('image', false)
                                }
                            }
                        }
                    }

                },
                placeholder: '1、写清楚程序版本 2、问题描述（区分 是新部署出现问题，还是升级出现问题，还是现场进行了其它什么相关操作，还是之前一直好好的突然出现的 这几种场景）'
            },
            editorOption2: {
                modules: {
                    toolbar: {
                        container: toolbarOptions,
                        handlers: {
                            image: function(value) {
                                if (value) {
                                    // 触发input框选择图片文件
                                    document.querySelector('.quill-img1 input').click()
                                } else {
                                    this.quill.format('image', false)
                                }
                            }
                        }
                    }

                },
                placeholder: '1、现场定位（现场进行了哪些排查操作，各个排查手段的输出结果是什么）2、日志（问题时刻异常日志截图+完成日志）'
            },
            editorOption3: {
                modules: {
                    toolbar: {
                        container: toolbarOptions,
                        handlers: {
                            image: function(value) {
                                if (value) {
                                    // 触发input框选择图片文件
                                    document.querySelector('.quill-img2 input').click()
                                } else {
                                    this.quill.format('image', false)
                                }
                            }
                        }
                    }

                },
                placeholder: '请输入影响描述'
            },
            // 本地路径
            localFile: {},
            localFile2: {},
            localFile3: {},
            // 本地图片
            loadImageNow: '',
            loadImageNow2: '',
            loadImageNow3: '',
            /* 得到token */
            importHeaders: { token: mytoken },
            //  文件上传
            fileUpload: `${process.env.VUE_APP_GOLDWIND_BASE_API}/v2/file/upload`,
            // 离开页面弹出框
            dialogVisible: false,
            // 当前人信息
            userInfo: {},
            // 文件列表
            encLosureList: [],

            // 动态控制服务是否开启
            // radio: 'false',

            // 产品列表
            ProductList: [],

            // 指派人列表
            UserList: [],
            creatUserList: [],

            // 问题类型列表
            marketProjectFirstList: [],

            // 问题类别列表
            marketProjectSecondList: [],

            // 反馈来源列表
            feedBackSourceList: [],

            // 营销项目状态列表
            problemTypeList: [],

            // 阶段列表
            stageList: [],
            childStageList: [],

            // 影响类别列表
            influenceCategory: [],
            // 根据传入的Id得到的单行数据
            draftForm: {},
            productID: '',
            // 项目名称列表
            MarketingProjectName: []
            //     setting: {
            //         branding: false,
            //         menubar: false,
            //         toolbar:
            //   'undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |',
            //         toolbar_drawer: 'sliding',
            //         quickbars_selection_toolbar:
            //   'removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor',
            //         plugins: 'link image  table lists fullscreen',
            //         language: 'zh_CN',
            //         init_instance_callback: editor => {
            //             if (this.content) {
            //                 editor.setContent(this.content)
            //             }
            //             this.finishInit = true
            //             editor.on('NodeChange Change SetContent KeyUp', () => {
            //                 this.hasChanged = true
            //             })
            //         }, // 上传图片
            //         convert_urls: false,
            //         automatic_uploads: true, // 开启点击图片上传时，自动进行远程上传操作
            //         images_upload_base_path: `${process.env.VUE_APP_GOLDWIND_BASE_API}`, // 图片上传的基本路径
            //         images_upload_url: '/v2/file/upload',
            //         images_upload_handler: (blobInfo, success, failure) => {
            //             var xhr, formData

            //             xhr = new XMLHttpRequest()
            //             xhr.withCredentials = false
            //             xhr.open('POST', `${process.env.VUE_APP_GOLDWIND_BASE_API}` + '/v2/file/upload')
            //             xhr.setRequestHeader('token', JSON.parse(sessionStorage.getItem('USERINFO')).token)
            //             // xhr.setRequestHeader('token', localStorage.getItem('token'));

            //             formData = new FormData()
            //             formData.append('file', blobInfo.blob())

            //             formData.append('checkOfficeFmt', false)
            //             formData.append('isTmp', false)
            //             xhr.onload = function(e) {
            //                 var json
            //                 console.log(e, xhr)
            //                 console.log(this)

        //                 if (xhr.errcode == '0') {
        //                     failure('服务器错误:' + xhr.msg)
        //                     return
        //                 }
        //                 json = JSON.parse(this.responseText)
        //                 if (!json.data || typeof json.data.fileSourceId != 'string') {
        //                     failure('服务器错误')
        //                     return
        //                 }
        //                 success(
        //                     `${process.env.VUE_APP_GOLDWIND_BASE_API}` +
        //       '/v2/file/download?' +
        //       '&fileSourceId=' +
        //       json.data.fileSourceId
        //                 )
        //             }
        //             xhr.send(formData)
        //         },
        //         image_advtab: false,
        //         language_url: 'tinymce/langs/zh_CN.js', // 语言包的路径
        //         elementpath: false, // 隐藏元素路径，不明白的可以切换true/false观察页面
        //         statusbar: false,
        //         resize: false,
        //         height: 200
        //     }
        }
    },
    computed: {},
    watch: {
        '$store.state.showItem': function(newVal, oldVal) {
            console.log(newVal, oldVal)
            if (newVal === true) {
                store.commit('setShowItem', true)
                // this.dialogVisible = true
            }
        }
    },
    created() {
    // 根据传入的数据获得当前行的对象数据
        // this.GetLineObj()
    },
    mounted() {
    /* 数据字典 */
        this.getProductList()
        this.getStageList()
        this.getChildStageList()
        // this.getMarketProjectFirstList('MARKETING_PROJECT_NAME') // 营销项目名称
        // this.getMarketProjectFirstList('MARKETING_PROJECT_BIG') // 营销项目名称
        // this.getMarketProjectFirstList('MARKETING_PROJECT_SMALL')
        // this.getMarketProjectFirstList('SOURCE_FEEDBACK') // 反馈来源列表
        // this.getMarketProjectFirstList('PROBLEM_TYPES') // 问题类型列表
        // this.getMarketProjectFirstList('IMPACT_CATEGORY') // 影响类别按钮

        this.GetLineObj()
        this.UserGetUserInfoAsync() // 当前人信息
        store.commit('setShowItem', false)
        store.commit('setShowState', true)
    },
    methods: {
        // 通过选择问题大类 确认问题小类列表
        changeBigCatlog(val) {
            console.log(val)
            console.log(this.marketProjectFirstList)
            let list = []
            this.marketProjectFirstList.forEach(element => {
                if (element.id == val) {
                    list = element.children
                }
            })
            this.draftForm.problemType = ''
            this.marketProjectSecondList = list
        },
        // 获取创建人部门
        creatorChange(_val) {
            for (const item of this.creatUserList) {
                if (item.id === this.draftForm.creator) {
                    this.draftForm.department = item.department
                }
            }
        },
        /**
     * @description: 获取当前人员信息
     */
        async UserGetUserInfoAsync() {
            try {
                const result = await FeedBack.UserGetUserInfoAsync()
                if (result.success) {
                    this.userInfo = result.data
                    // console.log('当前人员信息', this.userInfo)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
* @description: 上传成功回调函数
* @param {Object} _response 上传成功返回
* @param {Object} _file 上传文件
* @param {Array} _fileList 文件列表
* @param {Number} _index 索引值
* @return {*}
*/
        onFileSuccess(_response, _file, _fileList) {
            console.log(_response, _file, _fileList)
            if (_response.msg === '成功') {
                this.encLosureList.push({
                    name: _response.data.sourceName,
                    url: _response.data.fileSourceId
                })
            } else {
                this.$message.error(_response.message || '上传失败')
            }
        },

        /**
* @description: 上传失败
*/
        onFileError() {
            this.$message.error('上传失败')
        },

        /**
* @description: 移除文件
* @param {Object} _file 上传文件
* @param {Array} _fileList 文件列表
*/
        onFileRemove(_file, _fileList) {
            console.log(_file, _fileList)
            this.encLosureList = _fileList
        },

        /**
* @description: 文件导出
* @param {Object} _file 导出文件
*/
        handlePreview(file) {
            // console.log(file)
            if (file.url) {
                window.location.href = `${process.env.VUE_APP_GOLDWIND_BASE_API}/v2/file/download?fileSourceId=${file.url}`
            }
        },

        /**
* @description: 获取所有产品信息
*/
        async getProductList() {
            try {
                const result = await FeedBack.getProductListByCurrentUser()
                if (result.success) {
                    this.ProductList = result.data
                    // console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
* @description: 产品名称选择器 (选择改变指派人)
* @param {String} _val 根据产品ID获得指派人列表
*/
        async productionChange(_val) {
            // 根据产品ID获得指派人列表
            try {
                const result = await FeedBack.GetListItemAsync({ id: _val })
                if (this.draftForm.feedBackNumber != null) {
                    this.draftForm.createUserOfUser = null
                } else {
                    this.draftForm.userId = null
                }
                this.UserList = []
                if (result.success) {
                    console.log('MM', result.data)
                    // this.creatUserList = result.data
                    const arr = JSON.parse(JSON.stringify(result.data))
                    let index = ''
                    for (var i = 0; i < arr.length; i++) {
                        const item = arr[i]
                        if (item.id === this.userInfo.id) {
                            index = i
                        }
                    }
                    if (index) {
                        arr.splice(index, 1)
                    }
                    this.UserList = arr
                    // console.log('MM', result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
* @description:营销项目名称选择器(选择改变营销项目状态)
* @param {String} _val 营销项目名称ID
*/
        async marketProjectChange(_val) {
            // 根据营销项目名称ID获得营销项目状态列表
            // console.log(_val)
            this.draftForm.problemType = null
            this.marketProjectSecondList = []
            try {
                const result = await FeedBack.FormOptionGetListItemAsync({
                    id: _val,
                    type: 'MARKETING_PROJECT_BIG'
                })
                if (result.success) {
                    this.marketProjectSecondList = result.data
                    // console.log('MM', result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
* @description: 判断是否服务请求
* @param {Boolean} _val true/false
*/
        isServerRequestChange(_val) {
            // console.log(_val)
            this.isServerOpen = _val
        },

        /**
* @description: 获取相关下拉列表
* @param {String} type 传参
*/
        async getMarketProjectFirstList(parentId) {
            try {
                const result = await FormOptionSet.FormOptionSetGetAllAsync()
                if (result.success) {
                    this.buildTemplateData(result.data, parentId)
                    // console.log(result.data)
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.$message.error('服务器异常')
            }
        },
        // 拆分数据
        buildTemplateData(_data, parentId) {
            console.log('parentId', parentId)
            this.MarketingProjectName = _data.marketProjectName
            this.problemTypeList = _data.problemTypeSets
            this.influenceCategory = _data.impactCategorySets
            // this.marketProjectSecondList = _data.marketProjectsSmall
            this.feedBackSourceList = _data.sourceFeedbackSets
            this.marketProjectFirstList = _data.marketProjects
            _data.marketProjects.forEach(element => {
                if (element.id == parentId) {
                    this.marketProjectSecondList = element.children
                }
            })
        },
        // async getMarketProjectFirstList(type) {
        //     if (type == 'MARKETING_PROJECT_BIG') {
        //         try {
        //             const result = await FeedBack.FormOptionGetListItemAsync({
        //                 type: type
        //             })
        //             if (result.success) {
        //                 this.marketProjectFirstList = result.data
        //                 console.log('M', result.data)
        //             }
        //         } catch (err) {
        //             console.log(err)
        //         }
        //     } else if (type == 'SOURCE_FEEDBACK') {
        //         try {
        //             const result = await FeedBack.FormOptionGetListItemAsync({
        //                 type: type
        //             })
        //             if (result.success) {
        //                 this.feedBackSourceList = result.data
        //                 console.log('S', result.data)
        //             }
        //         } catch (err) {
        //             console.log(err)
        //         }
        //     } else if (type == 'MARKETING_PROJECT_SMALL') {
        //         try {
        //             const result = await FeedBack.FormOptionGetListItemAsync({
        //                 type: type
        //             })
        //             if (result.success) {
        //                 this.marketProjectSecondList = result.data
        //                 console.log('S', result.data)
        //             }
        //         } catch (err) {
        //             console.log(err)
        //         }
        //     } else if (type == 'IMPACT_CATEGORY') {
        //         try {
        //             const result = await FeedBack.FormOptionGetListItemAsync({
        //                 type: type
        //             })
        //             if (result.success) {
        //                 this.influenceCategory = result.data
        //                 console.log('P', result.data)
        //             }
        //         } catch (err) {
        //             console.log(err)
        //         }
        //     } else if (type == 'MARKETING_PROJECT_NAME') {
        //         try {
        //             const result = await FeedBack.FormOptionGetListItemAsync({
        //                 type: type
        //             })
        //             if (result.success) {
        //                 this.MarketingProjectName = result.data
        //                 console.log('P', result.data)
        //             }
        //         } catch (err) {
        //             console.log(err)
        //         }
        //     } else {
        //         try {
        //             const result = await FeedBack.FormOptionGetListItemAsync({
        //                 type: type
        //             })
        //             if (result.success) {
        //                 this.problemTypeList = result.data
        //                 console.log('P', result.data)
        //             }
        //         } catch (err) {
        //             console.log(err)
        //         }
        //     }
        // },

        /**
* @description: 获取所有阶段列表
*/
        async getStageList() {
            try {
                const result = await FeedBack.GetStageListAsync({ type: 'NAME' })
                if (result.success) {
                    this.stageList = result.data
                    // console.log('JJ', result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
* @description: 获取阶段列表
*/
        async getChildStageList() {
            try {
                const result = await FeedBack.GetListChildrenAsync({ type: 'NAME' })
                if (result.success) {
                    this.childStageList = result.data
                    // console.log('JJ', result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
* @description: 根据传入的ID操作当前行数据
*/
        async GetLineObj() {
            // console.log('111')
            // 根据当前行id 获得当前行的数据对象
            // 根据营销项目名称ID获得营销项目状态列表
            try {
                const result = await FeedBack.GetSingleLoadAsync({
                    id: this.$route.query.editId
                })
                if (result.success) {
                    console.log('result', result.data.problemTypeParent)
                    this.getMarketProjectFirstList(result.data.problemTypeParent)
                    this.draftForm = result.data
                    if (result.data.fileUrl != '' && result.data.fileUrl != null) {
                        const str = '[' + result.data.fileUrl + ']'
                        this.encLosureList = JSON.parse(str)
                    }
                    this.productID = result.data.productId
                    // console.log('获得draftForm', result.data)
                    // console.log('获得的产品ID', result.data.productId)
                    try {
                        const result = await FeedBack.GetListItemAsync({ id: this.productID })
                        this.UserList = []
                        if (result.success) {
                            this.creatUserList = result.data
                            const arr = JSON.parse(JSON.stringify(result.data))
                            let index = ''
                            for (var i = 0; i < arr.length; i++) {
                                const item = arr[i]
                                if (item.id === this.userInfo.id) {
                                    index = i
                                }
                            }
                            if (index) {
                                arr.splice(index, 1)
                            }
                            // const that = this

                            // const index = result.data.findIndex(item => item.id == that.userInfo.id)
                            // result.data.splice(index, 1)
                            this.UserList = arr
                        }
                    } catch (err) {
                        console.log(err)
                    }
                    this.creatorChange(result.data.creator)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
* @description: 存草稿方法
*/
        async getMsgFormSon() {
            const loading = this.$loading({
                lock: true,
                text: '数据传输中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            this.draftForm.draftTag = true
            if (this.encLosureList != [] && this.encLosureList.length > 0) {
                const strs = JSON.stringify(this.encLosureList)
                this.draftForm.fileUrl = strs.substring(1, strs.length - 1)
            } else {
                this.draftForm.fileUrl = null
            }
            try {
                const result = await FeedBack.DraftUpdateAsync(this.draftForm)
                if (result.success) {
                    loading.close()
                    store.commit('setShowState', false)
                    // console.log('-----------', result.data)
                    // this.$router.push('/Feedback')
                    this.$router.go(-1)
                } else {
                    loading.close()
                    store.commit('setShowState', false)
                    // this.$router.push('/Feedback')
                    this.$router.go(-1)
                }
            } catch (err) {
                loading.close()
                console.log(err)
            }
        },

        /**
* @description: 发布方法
* @param {String} formName 用于校验
*/
        getMsgFormSonS(formName) {
            this.draftForm.draftTag = false
            if (this.encLosureList != [] && this.encLosureList.length > 0) {
                const strs = JSON.stringify(this.encLosureList)
                this.draftForm.fileUrl = strs.substring(1, strs.length - 1)
            } else {
                this.draftForm.fileUrl = null
            }
            if (this.draftForm.feedBackNumber != null) {
                this.draftForm.userId = this.draftForm.createUserOfUser
            }
            this.draftForm.stage = '1423154037607493634'
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.send()
                } else {
                    this.$message.error('请把必填项 填写完整')
                }
            })
        },
        // 发布函数
        async send() {
            const loading = this.$loading({
                lock: true,
                text: '数据传输中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            try {
                const result = await FeedBack.DraftUpdateAsync(this.draftForm)
                if (result.success) {
                    loading.close()
                    store.commit('setShowState', false)
                    // console.log('-----------', result.data)
                    // this.$emit('Search')
                    this.$router.go(-1)
                } else {
                    loading.close()
                    store.commit('setShowState', false)
                    // this.$emit('Search')
                    this.$router.go(-1)
                }
            } catch (err) {
                loading.close()
                console.log(err)
            }
        },
        // 取消按钮
        sendCancel() {
            store.commit('setShowState', false)
            this.$router.go(-1)
        },
        // 返回按钮
        toFeedBack() {
            store.commit('setShowItem', true)
        },
        // 确定按钮
        dialogComfire() {
            store.commit('setShowState', false)
            if (store.state.toPath != null && store.state.toPath != '') {
                store.commit('setShowItem', false)
                this.$router.push({
                    path: store.state.toPath
                })
            } else {
                store.commit('setShowItem', false)
                // this.$router.push('/feedBack')
                this.$router.back(-1)
            }
        },
        // 弹出框存草稿按钮
        dialogGetMsgFormSon() {
            this.dialogVisible = false
            this.getMsgFormSon()
        },
        // 存草稿发布按钮
        dialogGetMsgFormSons() {
            this.dialogVisible = false
            this.getMsgFormSons('draftForm')
        },
        getProblemDescribeContent(Value) {
            this.draftForm.problemDescribe = Value
        },
        getExcludeResultContent(Value) {
            this.draftForm.excludeResult = Value
        },
        getInfluenceDescribeContent(Value) {
            this.draftForm.influenceDescribe = Value
        },
        /**
     * @description: 重现描述文本框 文件上传之前的钩子函数
     * @param {file} file
     */
        quillImgBefore(file) {
            // console.log(file)
            const fileType = file.type
            if (fileType === 'image/jpeg' || fileType === 'image/png') {
                return true
            } else {
                this.$message.error('请插入图片类型文件(jpg/jpeg/png)')
                return false
            }
        },
        /**
     * @description: 重现描述文本框 文件上传之前的钩子函数
     * @param {file} file
     */
        quillImgBefore2(file) {
            // console.log(file)
            const fileType = file.type
            if (fileType === 'image/jpeg' || fileType === 'image/png') {
                return true
            } else {
                this.$message.error('请插入图片类型文件(jpg/jpeg/png)')
                return false
            }
        },
        /**
     * @description: 重现描述文本框 文件上传之前的钩子函数
     * @param {file} file
     */
        quillImgBefore3(file) {
            // console.log(file)
            const fileType = file.type
            if (fileType === 'image/jpeg' || fileType === 'image/png') {
                return true
            } else {
                this.$message.error('请插入图片类型文件(jpg/jpeg/png)')
                return false
            }
        },
        /**
     * @description: 重现描述文本框 文件上传成功的钩子函数
     * @param {Object} res 文件上传成功返回的参数
     * @return {*}
     */
        quillImgSuccess(res) {
            // 如果上传成功
            if (res.errcode == '0') {
                // console.log(res.data.fileSourceId)
                const pickUrl =
          Api.fileUploadAboutEditor + '?fileSourceId=' + res.data.fileSourceId
                const quill = this.$refs.quillEditor.quill
                const range = quill.getSelection()
                quill.insertEmbed(range.index, 'image', pickUrl)
            } else {
                this.$message.error('图片插入失败')
            }
        },
        /**
     * @description: 重现描述文本框 文件上传成功的钩子函数
     * @param {Object} res 文件上传成功返回的参数
     * @return {*}
     */
        quillImgSuccess2(res) {
            // 如果上传成功
            if (res.errcode == '0') {
                // console.log(res.data.fileSourceId)
                const pickUrl =
          Api.fileUploadAboutEditor + '?fileSourceId=' + res.data.fileSourceId
                const quill = this.$refs.quillEditor2.quill
                const range = quill.getSelection()
                quill.insertEmbed(range.index, 'image', pickUrl)
            } else {
                this.$message.error('图片插入失败')
            }
        },
        /**
     * @description: 重现描述文本框 文件上传成功的钩子函数
     * @param {Object} res 文件上传成功返回的参数
     * @return {*}
     */
        quillImgSuccess3(res) {
            // 如果上传成功
            if (res.errcode == '0') {
                // console.log(res.data.fileSourceId)
                const pickUrl =
          Api.fileUploadAboutEditor + '?fileSourceId=' + res.data.fileSourceId
                const quill = this.$refs.quillEditor3.quill
                const range = quill.getSelection()
                quill.insertEmbed(range.index, 'image', pickUrl)
            } else {
                this.$message.error('图片插入失败')
            }
        },

        /**
     * @description: 重现描述文本框 文件上传图片失败的钩子函数
     */
        // 富文本图片上传失败
        uploadError() {
            // loading动画消失
            this.$message.error('图片插入失败')
        },
        /**
     * @description: 重现描述文本框 文件上传图片失败的钩子函数
     */
        // 富文本图片上传失败
        uploadError2() {
            // loading动画消失
            this.$message.error('图片插入失败')
        },
        /**
     * @description: 重现描述文本框 文件上传图片失败的钩子函数
     */
        // 富文本图片上传失败
        uploadError3() {
            // loading动画消失
            this.$message.error('图片插入失败')
        },

        /**
     * @description: 重现富文本框 文件状态改变的钩子函数
     * @param {file} file
     */
        imgSaveToUrl(file) {
            // 也可以用file
            this.localFile = file.raw // 或者

            // 转换操作可以不放到这个函数里面，
            // 因为这个函数会被多次触发，上传时触发，上传成功也触发
            const reader = new FileReader()
            reader.readAsDataURL(this.localFile) // 这里也可以直接写参数event.raw

            // 转换成功后的操作，reader.result即为转换后的DataURL ，
            // 它不需要自己定义，你可以console.log(reader.result)看一下
            reader.onload = () => {
                this.loadImageNow = reader.result
            }
        },
        /**
     * @description: 重现富文本框 文件状态改变的钩子函数
     * @param {file} file
     */
        imgSaveToUrl2(file) {
            // 也可以用file
            this.localFile2 = file.raw // 或者

            // 转换操作可以不放到这个函数里面，
            // 因为这个函数会被多次触发，上传时触发，上传成功也触发
            const reader = new FileReader()
            reader.readAsDataURL(this.localFile2) // 这里也可以直接写参数event.raw

            // 转换成功后的操作，reader.result即为转换后的DataURL ，
            // 它不需要自己定义，你可以console.log(reader.result)看一下
            reader.onload = () => {
                this.loadImageNow2 = reader.result
            }
        },
        /**
     * @description: 重现富文本框 文件状态改变的钩子函数
     * @param {file} file
     */
        imgSaveToUrl3(file) {
            // 也可以用file
            this.localFile3 = file.raw // 或者

            // 转换操作可以不放到这个函数里面，
            // 因为这个函数会被多次触发，上传时触发，上传成功也触发
            const reader = new FileReader()
            reader.readAsDataURL(this.localFile3) // 这里也可以直接写参数event.raw

            // 转换成功后的操作，reader.result即为转换后的DataURL ，
            // 它不需要自己定义，你可以console.log(reader.result)看一下
            reader.onload = () => {
                this.loadImageNow3 = reader.result
            }
        }
    }
}
</script>

<style scoped lang="less" src="./editFeedBack.less"></style>
<style scoped>
::v-deep .ql-editor li{
    list-style-type:decimal!important;
    list-style-position:inside!important;
}
::v-deep .ql-editor ul>li:before {
    content: "\2022";
}

::v-deep .ql-editor ul>li::marker {
    content: "";
    display: none;

}

::v-deep .ql-editor li:before {
    display: inline-block;
    white-space: nowrap;
    width: 1.2em;
}
::v-deep #lengthLimit>.el-form-item__content  .el-form-item__error{
    top: 44px;
    left: 10px;
}
</style>
